2<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/city.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/dsdialog.js"></script>
<title>addFriend</title>
<style type="text/css"> 
*{ margin:0; padding:0;}
body { font:12px/1.5 Arial; color:#666; background:#d6dff7;}
ul,li{ list-style:none;}
img{border:0 none;}
body .main{ 
   margin:40px auto;
   background-color:#ccccff;
   width:500px;
   height:430px;
   border-style:dash;
   border-color:red;
}
.button_blue
{
    margin-left:3px;
	display:inline-block;
	float:left;
	height:41px;border-radius:4px;
	background:#799AE1;border:none;cursor:pointer;
	border-bottom:3px solid #0078b3;*border-bottom:none;
	color:#fff;
	font-size:16px;padding:0 10px;*width140px;
	text-align:center;outline:none;font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif;
}
input.button_blue:hover
{
	background:#0081c1;
	border-bottom:3px solid #006698;*border-bottom:none;
	color:#fff;
	text-decoration:none;
}
/*---------------------------------------demo css--------------------------------------------*/
.date_selector, .date_selector *{width: auto;height: auto;border: none;background: none;margin: 0;padding: 0;text-align: left;text-decoration: none;}
.date_selector{background:#fbfbfb;border: 1px solid #ccc;padding: 10px;margin:0;margin-top:-1px;position: absolute;z-index:100000;display:none;border-radius: 3px;box-shadow: 0 0 5px #aaa;box-shadow:0 2px 2px #ccc; width:220px;}
.date_selector_ieframe{position: absolute;z-index: 99999;display: none;}
.date_selector .nav{width: 17.5em;}
.date_selector .nav p{clear: none;}
.date_selector .month_nav, .date_selector .year_nav{margin: 0 0 3px 0;padding: 0;display: block;position: relative;text-align: center;}
.date_selector .month_nav{float: left;width: 55%;}
.date_selector .year_nav{float: right;width: 42%;margin-right: -8px;}
.date_selector .month_name, .date_selector .year_name{font-weight: bold;line-height: 20px;}
.date_selector .button{display: block;position: absolute;top: 0;width:18px;height:18px;line-height:16px;font-weight:bold;color:#5985c7;text-align: center;font-size:12px;overflow:hidden;border: 1px solid #ccc;border-radius:2px;}
.date_selector .button:hover, .date_selector .button.hover{background:#5985c7;color: #fff;cursor: pointer;border-color:#3a930d;}
.date_selector .prev{left: 0;}
.date_selector .next{right: 0;}
.date_selector table{border-spacing: 0;border-collapse: collapse;clear: both;margin: 0; width:220px;}
.date_selector th, .date_selector td{width: 2.5em;height: 2em;padding: 0 !important;text-align: center !important;color: #666;font-weight: normal;}
.date_selector th{font-size: 12px;}
.date_selector td{border:1px solid #f1f1f1;line-height: 2em;text-align: center;white-space: nowrap;color:#5985c7;background: #fff;}
.date_selector td.today{background: #eee;}
.date_selector td.unselected_month{color: #ccc;}
.date_selector td.selectable_day{cursor: pointer;}
.date_selector td.selected{background:#2b579a;color: #fff;font-weight: bold;}
.date_selector td.selectable_day:hover, .date_selector td.selectable_day.hover{background:#5985c7;color: #fff;}
/*-----------------------------------------------------------------------------------*/
</style> 
<script type="text/javascript" src="http://www.js-css.cn/jscode/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.date_input.pack.js"></script> 
</head>
<body>
<script type="text/javascript">
var flag = new  Array(false,false,false);
$(function(){
	$('.date_picker').date_input();
	$(".name").blur(function(){
		var name = $(this).val().trim();
		if(name==null || name==""){
			$(".errorMsg").html("<font color='red'>×姓名不能为空</font>");
			$(this).focus();
			flag[0] = false;
		}else if((name.length>10)||(name.length<2)){
			$(".errorMsg").html("<font color='red'>×姓名长度必须在2-10之间</font>");
			$(this).focus();
			flag[0] = false;
		}
		else{
			flag[0] = true;
			$(".errorMsg").html("");
		}
		
	});
	$(".telephone").blur(function(){
		var te = $(this).val().trim();
		if(te==null || te==""){
			
			$(".errorMsg").html("<font color='red'>×电话不能为空</font>");
			$(this).focus();
			flag[1] = false;
		}else if(!/^1[3|4|5|8][0-9]\d{8}$/.test(te)){
			
			$(".errorMsg").html("<font color='red'>×电话格式不正确</font>");
			$(this).focus();
			flag[1] = false;
		}
		else{
			flag[1] = true;
			$(".errorMsg").html("");
		}
	});
	$(".address").blur(function(){
		var add = $(this).val().trim();
		if(add==null || add==""){
			$(".errorMsg").html("<font color='red'>×地址不能为空</font>");
			$(this).focus();
			flag[2] = false;
		}else if((add.length>20)||(add.length<2)){
			$(".errorMsg").html("<font color='red'>×地址长度必须在2-20之间</font>");
			$(this).focus();
			flag[2] = false;
		}
		else{
			flag[2] = true;
			$(".errorMsg").html("");
		}
	});
	$("#loginButton").click(function(){
		if(flag[0]&&flag[1]&&flag[2]){
			var age = (new Date().getFullYear())-parseInt($(".date_picker").val().substring(0,4));
			age=age<=0?1:age;
			$.ajax({
				type: "post",
				url: "FriendAction_addFriend",
				data: "name=" + $(".name").val()+"&sex="+$(".sex:checked").val()+"&birthday="+$(".date_picker").val()+"&attr="+$(".attr:checked").val()+"&telephone="+$(".telephone").val()+"&address="+$(".address").val()+"&age="+age,
				dataType: 'json',
				async:false,
				success: function(result) {
	               if(result=="1"){
	            	   ds.dialog.confirm("添加朋友成功,是否继续添加?", function(){$(".name").val("");$(".telephone").val("");$(".address").val("");},function(){window.parent.mainFrame.location.href="lookFriend.html" });  
	               }else{
	            	   ds.dialog.confirm("添加朋友失败,是否继续添加?",function(){$(".name").val("");$(".telephone").val("");$(".address").val("");},function(){window.parent.mainFrame.location.href="lookFriend.html" });
	               }
				}  
			});
		}
	});
});
</script>
<form method="" action="" id="form">
<div class="main">
<h2><font size="5">Add Friend</font></h2>
<div class="errorMsg" style="font:20px 楷体;height:30px;margin-top:20px;margin-left:50px;"></div>
<div style=" margin:10px auto; width:500px;margin-left:10px;">
<font size="4.8px">姓名</font>&nbsp;<input  style="width:256px;background: #fefefe;border: 1px solid #bbb;font-size: 14px;color: #333;padding: 7px;border-radius: 3px;" type="text" class="name">
</div>
<div style=" margin:20px auto; width:500px;margin-left:10px;">
<font size="4.8px">性别</font>&nbsp;&nbsp;&nbsp;<input type="radio" value="男" name="sex" checked class="sex" style="zoom:140%;"><font size="4.8px">男</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="女" class="sex" name="sex" style="zoom:140%;"><font size="4.8px">女</font>
</div>
<div style=" margin:20px auto; width:500px;margin-left:10px;">
<font size="4.8px">生日</font>&nbsp;<input  style="width:126px;background: #fefefe;border: 1px solid #bbb;font-size: 14px;color: #333;padding: 7px;border-radius: 3px;" type="text" readonly="true" value="2017-8-20" class="date_picker">
&nbsp;<input type="radio" value="农历" name="attr" checked class="attr" style="zoom:140%;"><font size="4.8px">农历</font>&nbsp;&nbsp;&nbsp;<input type="radio" value="阳历" class="attr" name="attr" style="zoom:140%;"><font size="4.8px">阳历</font>
</div>
<div style=" margin:20px auto; width:500px;margin-left:10px;">
<font size="4.8px">电话</font>&nbsp;<input  style="width:256px;background: #fefefe;border: 1px solid #bbb;font-size: 14px;color: #333;padding: 7px;border-radius: 3px;" type="text" class="telephone">
</div>
<div style=" margin:20px auto; width:500px;margin-left:10px;">
<font size="4.8px">地址</font>&nbsp;<input  style="width:256px;background: #fefefe;border: 1px solid #bbb;font-size: 14px;color: #333;padding: 7px;border-radius: 3px;" type="text" class="address">
</div>
<div style="padding-left:13px;margin-top:20px;"><input id="loginButton" type="button" value="提  交" style="width:150px;" class="button_blue"/>
<input id="reset" type="reset" value="重  置" style="width:150px;" class="button_blue"/>
</div>
</div>
</form>
</body> 
</html>